import React, { Component } from 'react'
import {
  Grid, Form, Table, Checkbox, Image,
} from 'semantic-ui-react'
import { TableRow, OptionIcon, OptionImage } from 'components/memberTable'
import { project as projectDuck } from 'ducks'

export default class NewTag extends Component {
  render() {
    return (
      <Grid>
        <Grid.Column width={4} />
        <Grid.Column width={8}>
          <Table basic="very" style={{ marginBottom: '2em' }}>
            <Table.Header>
              <Table.Row>
                <Table.HeaderCell>默认值</Table.HeaderCell>
                <Table.HeaderCell>名称</Table.HeaderCell>
                <Table.HeaderCell />
              </Table.Row>
            </Table.Header>
            <Table.Body>
              <TableRow>
                <Table.Cell collapsing width={2}>
                  <Checkbox radio />
                </Table.Cell>
                <Table.Cell>人</Table.Cell>
                <Table.Cell className="last-cell" width={2} textAlign="right">
                  <OptionImage
                    className="options"
                    src="https://img.icons8.com/color/2x/left-up2.png"
                  />
                </Table.Cell>
              </TableRow>
              <TableRow>
                <Table.Cell collapsing width={2}>
                  <Checkbox radio />
                </Table.Cell>
                <Table.Cell>车</Table.Cell>
                <Table.Cell className="last-cell" width={2} textAlign="right">
                  <OptionImage
                    className="options"
                    src="https://img.icons8.com/color/2x/left-up2.png"
                  />
                </Table.Cell>
              </TableRow>
            </Table.Body>
          </Table>
        </Grid.Column>
        <Grid.Column width={4} />
      </Grid>
    )
  }
}
